import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Ces from "./ces";

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Topic({ match }) {
  return <h3>Requested Param: {match.params.id}</h3>;
}

function Topics({ match }) {
  return (
    <div>
      <h2>Topics</h2>

      <ul>
        <li>
          <Link to={`${match.url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>

      <Route path={`${match.path}/:id`} component={Topic} />
      <Route
        exact
        path={match.path}
        render={() => <h3>Please select a topic.</h3>}
      />
    </div>
  );
}

function Header() {
  return (
    <ul>
      <li>
      
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/topics">Topics</Link>
        <br></br>
<Link    to="/Ces/"  >12112</Link>



	{/* <Link to="/Page3/" style={{color:'black'}}>
				<div>点击跳转到Page3</div>
				</Link> */}

      </li>
    </ul>
  );
}


function App() {
  return (
    <Router>
      <div>


             <Route exact path="/" component={Header} />
        <Route path="/about" component={About} />
        <Route path="/topics" component={Topics} />
        <Route path="/Ces/" component={Ces} />
      </div>
    </Router>
  );
}


export {  App};



// import React from "react";
// import { BrowserRouter as Router, Route, Link } from "react-router-dom";

// function Index() {
//   return <h2>Index</h2>;
// }

// function About() {
//   return <h2>About</h2>;
// }

// function Users() {
//   return <h2>Users</h2>;
// }

// function AppRouter() {
//   return (
//     <Router>
//       <div>
//         <nav>
//           <ul>
//             <li>
//               <Link to="/">Home</Link>
//             </li>
//             <li>
//               <Link to="/about/">About</Link>
//             </li>
//             <li>
//               <Link to="/users/">Users</Link>
//             </li>
//           </ul>
//         </nav>

//         <Route path="/"  component={Index} />
//         <Route path="/about/" component={About} />
//         <Route path="/users/" component={Users} />
//       </div>
//     </Router>
//   );
// }

//export { App };